<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
			
		</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				text-decoration:none;
				list-style: none;
			}
			.main{
				
				width: 100%;
				height: 100%;
			}
			.disaster{
				margin: 0 auto;
				margin-top: 100px;
				border:1px solid #000;
				height: 630px;
				width: 1320px;
				background-color: #008080;
				border-radius: 10px;
				overflow: hidden;
			}
			.d_picture{
				margin-top: 15px;
				margin-left: 10px;
				height: 600px;
				width: 900px;
				border:1px solid #000;
				float: left;
			}

			.d_type{
				width: 400px;
				height: 630px;
				border-left: 1px solid #000;
				float: right;
			}
			.d_type li {
				width: 400px;
				height: 210px;
				border-bottom: 1px solid #000;
				background-color: rgba(249,166,71,0);
				transition: background-color 1s ease-in-out;
			}
			.d_type li.selected {
				background-color: rgba(249,166,71,1);
			}
			.d_type img {
				margin: 30px 10px;
				width: 210px;
				height: 140px;
				float: left;
				border: 5px solid #fff
			  }
			.d_type p {
				padding-top: 100px;
				padding-left: 260px;
				
				color: white;
			}
			.d_type .first {
				background-color: rgba(249,166,71,1);
			}
			.no{
				border: none !important;
			}
			.place{
				height: 400px;
			}
		</style>
		<script type="text/javascript">
			var nodes;
			var oImg;
			var now=0;
			var all=2;
			var val;
			var index=0;
			var b_html=["Earthquake.html","Flood.html","Typhoon.html"];
			function gotoImg(p_id,num){
				oImg.style.opacity = 0;
				oImg.src = p_id;
				oImg.style.opacity = 1;
				var val=document.querySelector(".b_html");
				val.href=b_html[num];
				var currentLi = nodes[index];
				
				for (var i = 0; i < nodes.length; i++) {
					if (i === index) {
						nodes[i].classList.add("selected");
					}else{
						nodes[i].classList.remove("selected");
					}
				}
			}
			window.onload=function(){
				nodes = document.querySelector(".d_type").querySelectorAll("li");
				oImg = document.querySelector(".b_pic");
				nodes[0].classList.add("selected");
				nodes[0].onmousemove=function(){
					gotoImg("img/earthquake_earthquake-1665898_1280.jpg",0);
					index=0;
				}
				nodes[1].onmousemove=function(){
					gotoImg("img/flood_flood-965092_1280.jpg",1);
					index=1;
				}
				nodes[2].onmousemove=function(){
					gotoImg("img/typhoon_cyclone-62957_1280.jpg",2);
					index=2;
				}
				
				setInterval(function() {
				      index++;
				      if (index >= nodes.length) {
				        index = 0;
				      }
				      var imageSrc = nodes[index].querySelector("img").src;
				      gotoImg(imageSrc,index);
				    }, 3000);
			}
			
			
			
			
		</script>
		
		<!-- Bootstrap Library CSS CDN go here -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
		<!-- Boostrap Library JS CDN  go here -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
	</head>
	<body >
		
	<!-- 	<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
		    <div class="container-fluid">
		      <img src="./images/logo.jpg" height="36">  
		    <a class="navbar-brand" href="#">DG8-08's app</a>
		      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		        <span class="navbar-toggler-icon"></span>
		      </button>
		      <div class="collapse navbar-collapse" id="navbarSupportedContent">
		        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
		          <li class="nav-item">
		            <a class="nav-link active" aria-current="page" href="#">Home</a>
		          </li>
		          <li class="nav-item">
		            <a class="nav-link" href="#">Link</a>
		          </li>
		          <li class="nav-item dropdown">
		            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
		              Dropdown
		            </a>
		            <ul class="dropdown-menu">
		              <li><a class="dropdown-item" href="#">Action</a></li>
		              <li><a class="dropdown-item" href="#">Another action</a></li>
		              <li><hr class="dropdown-divider"></li>
		              <li><a class="dropdown-item" href="#">Something else here</a></li>
		            </ul>
		          </li>
		          
		        </ul>
		        <form class="d-flex" role="search">
		          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		          <button class="btn btn-outline-success" type="submit">Search</button>
		        </form>
		      </div>
		    </div>
		  </nav> -->
		
		
		
		
		
		<div class="main">
			<div class="disaster">
					<div class="d_picture">
						<a href="Earthquake.html" class="b_html">
							<img src="img/earthquake_earthquake-1665898_1280.jpg" class="b_pic">
						</a>
					</div>
					<div class="d_type">
						<ul>
							<li class="selected">
								<a href="Earthquake.html">
									<img src="img/earthquake_earthquake-1665898_1280.jpg" alt="">
									<p>Earthquake</p>
								</a>
								
							</li>
							<li>
								<a href="Flood.html">
									<img src="img/flood_flood-965092_1280.jpg" alt="">
									<p>Flood</p>
								</a>
								
							</li>
							<li class="no">
								<a href="Typhoon.html">
									<img src="img/typhoon_cyclone-62957_1280.jpg" alt="">
									<p>Typhoon</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
		</div>
		
		<nav class="place"></nav>
		
		
		<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
		    <p class="col-md-4 mb-0 text-body-secondary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2023 DG8_08</p>
		
		   
		
		    <ul class="nav col-md-4 justify-content-end">
		      <li class="nav-item"><a href="index.html" class="nav-link px-2 text-body-secondary">Home</a></li>
		      
		      <li class="nav-item"><a href="about.html" class="nav-link px-2 text-body-secondary">About</a></li>
		    </ul>
		  </footer>	
	</body>
</html>
